<template>
  <!-- 企业注册 -->
  <div class="form-background">
    <div class="title-container">
      <el-image class="logo" :src="logo" fit="fill" />
      <p class="title">企业注册</p>
    </div>
    <!-- 个人表单项 -->
    <div class="register-form">
      <el-form
        ref="registerForm"
        label-position="top"
        :model="initEnterprise"
        :rules="rules"
      >
        <el-form-item prop="loginName">
          <el-input
            v-model="initEnterprise.loginName"
            tabindex="1"
            placeholder="请输入登录名"
            autocomplete="on"
          >
            <i slot="prefix" class="iconfont icon-qiyeshenfenrz" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="initEnterprise.password"
            tabindex="2"
            autocomplete="on"
            :type="passwordType"
            placeholder="密码（由数字加字母组合且不小于6位）"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item prop="passwords">
          <el-input
            v-model="initEnterprise.passwords"
            tabindex="3"
            :type="passwordType"
            placeholder="确认密码"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="initEnterprise.code"
            tabindex="4"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon"
            />
            <i
              slot="suffix"
              class="el-icon-refresh"
              style="cursor:pointer;"
              @click="getCode"
            />
          </el-input>
          <div class="login-code">
            <img v-if="showCode" :src="codeUrl" @click="getCode">
            <svg-icon
              v-if="!showCode"
              icon-class="pic-broken"
              style="cursor:pointer;width: 100px;height: 40px;"
              @click="getCode"
            />
          </div>
        </el-form-item>
        <button class="reg-btn" @click.prevent="goBaseInfo">下一步</button>
        <p class="login">
          <span @click="toPersonRegister">个人注册</span>
          <span>已有账号？</span>
          <span @click="toLogin">去登录</span>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validateNumLetter } from '@/utils/validate.js'
import { checkLoginName } from '@/api/register'
import { captchaImage } from '@/api/user'
import logo from '@/assets/image/logo.png'
export default {
  name: 'RegisterDialog',
  components: {},
  data() {
    const passwordLength = (rule, value, callback) => {
      if (value.length < 6 || value.length > 20) {
        return callback(new Error('登录密码不能少于6位且不能大于20位'))
      } else {
        callback()
      }
    }
    const validPassword = (rule, value, callback) => {
      if (this.initEnterprise.password !== value) {
        callback(new Error('请确认密码输入是否一致'))
      } else {
        callback()
      }
    }
    const validLoginName = (rule, value, callback) => {
      checkLoginName({ loginName: value }).then(res => {
        if (res.code === 500) {
          callback(new Error(res.message))
        } else {
          callback()
        }
      })
    }
    return {
      logo: logo, // logo图片地址
      codeUrl: '', // 验证码
      showCode: false, // 验证码正常显示
      passwordType: 'password', // 密码图标
      // 账号密码
      initEnterprise: {
        loginName: '',
        password: '',
        passwords: '',
        code: ''
      },
      // 账号密码规则
      rules: {
        loginName: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { required: true, validator: validLoginName, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { required: true, validator: passwordLength, trigger: 'blur' },
          { required: true, validator: validateNumLetter }
        ],
        passwords: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { required: true, validator: passwordLength, trigger: 'blur' },
          { required: true, validator: validPassword, trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 是否显示密码
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    // 图片验证
    getCode() {
      captchaImage()
        .then(res => {
          this.codeUrl = 'data:image/gif;base64,' + res.data.img
          this.showCode = true
        })
        .catch(() => {
          this.showCode = false
        })
    },
    // 注册账号
    goBaseInfo() {
      this.$refs.registerForm.validate(valid => {
        if (!valid) return
        this.$parent.active = 2
        this.$parent.initEnterprise = this.initEnterprise
      })
    },
    // 已经账号去登录
    toLogin() {
      this.$router.push('/login')
    },
    // 跳转个人注册
    toPersonRegister() {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="scss" scoped></style>
